<html>
<head>
    <title>Buzzy</title>
    <meta charset="utf-8">
    <script src="<?php echo ROOT_URL;  ?>public/js/jquery-2.0.3.js" type="application/javascript"></script>
    <link rel="stylesheet" href="<?php echo ROOT_URL; ?>public/bxslider/jquery.bxslider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="<?php echo ROOT_URL; ?>public/css/home.css" type="text/css" media="screen" />
    <link rel="stylesheet" type="text/css" href="<?php echo ROOT_URL; ?>public/awesome/css/font-awesome.css" />
    <script type="text/javascript" src="<?php echo ROOT_URL; ?>public/bxslider/jquery.bxslider.js"></script>
    <script src="<?php echo ROOT_URL; ?>public/js/jquery.spritely.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('.bxslider').bxSlider({
                auto: false,
                autoControls: true,
                pause: 2000
            });

            $('#far-clouds').pan({fps: 30, speed: 2, dir: 'left'});

            window.actions = {
                fly_slowly_forwards: function() {
                    $('#bird')
                        .fps(10)
                        .spState(1);
                    $('#hill1, #hill2, #clouds')
                        .spRelSpeed(10)
                        .spChangeDir('left');
                },
                fly_slowly_backwards: function() {
                    $('#bird')
                        .fps(10)
                        .spState(2);
                    $('#hill1, #hill2, #clouds')
                        .spRelSpeed(10)
                        .spChangeDir('right');
                },
                fly_quickly_forwards: function() {
                    $('#bird')
                        .fps(20)
                        .spState(1);
                    $('#hill1, #hill2, #clouds')
                        .spRelSpeed(30)
                        .spChangeDir('left');
                },
                fly_quickly_backwards: function() {
                    $('#bird')
                        .fps(20)
                        .spState(2);
                    $('#hill1, #hill2, #clouds')
                        .spRelSpeed(30)
                        .spChangeDir('right');
                },
                fly_like_lightning_forwards: function() {
                    $('#bird')
                        .fps(25)
                        .spState(1);
                    $('#hill1, #hill2, #clouds')
                        .spSpeed(40)
                        .spChangeDir('left');
                },
                fly_like_lightning_backwards: function() {
                    $('#bird')
                        .fps(25)
                        .spState(2);
                    $('#hill1, #hill2, #clouds')
                        .spSpeed(40)
                        .spChangeDir('right');
                }
            };

            window.page = {
                hide_panels: function() {
                    $('.panel').hide(300);
                },
                show_panel: function(el_id) {
                    this.hide_panels();
                    $(el_id).show(300);
                }
            }
        });
    </script>
</head>
<body>
<div id="homepage-wrapper">
    <div class="facebook-cloud"></div>
    <div id="far-clouds" class="far-clouds stage"></div>
    <div id="near-clouds" class="near-clouds stage"></div>
    <div id="homepage">
        <div class="homepage">
            <div class="homepage-header">
                <div class="homepage-header-logo">
                    <a href="<?php echo ROOT_URL; ?>"><img src="<?php echo ROOT_URL; ?>public/images/homepage.png"></a>
                </div>
                <div class="homepage-header-social">
                    <a href="<?php echo ROOT_URL; ?>contact" class="phone-icon"><i class="fa fa-phone"></i></a>
                    <a href="<?php echo ROOT_URL; ?>contact" class="address-icon"><i class="fa fa-map-marker"></i></a>
                    <a href="<?php echo ROOT_URL; ?>" class="facebook-icon"><i class="fa fa-facebook"></i></a>
                    <a href="<?php echo ROOT_URL; ?>" class="twitter-icon"><i class="fa fa-twitter"></i></a>
                    <a href="<?php echo ROOT_URL; ?>" class="wifi-icon"><i class="fa fa-rss"></i></a>
                </div>
            </div>
            <div class="homepage-slide">
                <ul class="bxslider">
                    <?php
                        foreach($data as $value){
                            ?>
                            <li>
                                <div class="slider-left">
                                    <?php
                                        if($value['campaign_image']){
                                            echo '<img src="'.ROOT_URL.'upload/images/'.$value['campaign_image'].'" />';
                                        }else{

                                        }
                                    ?>
                                </div>
                                <div class="slider-right">
                                    <div class="campaign">
                                        <h1>
                                            <?php
                                                echo mb_substr(strip_tags(html_entity_decode($value['campaign_title'], ENT_QUOTES, 'UTF-8')),0, 40, 'UTF-8')."...";
                                            ?>
                                        </h1>
                                        <p class="campaign-description">
                                            <?php
                                                echo $value['campaign_short_description'];
                                            ?>
                                        </p>
                                        <p class="campaign-view"><a href="<?php echo ROOT_URL; ?>campaign">VIEW BUZZ ABOUT THIS CAMPAIGN</a></p>
                                        <p class="campaign-become"><a href="<?php echo ROOT_URL; ?>register">BECOME A BUZZER NOW</a></p>
                                    </div>
                                </div>
                            </li>
                            <?php
                        }
                    ?>
                    <!--<li>
                        <div class="slider-left">
                            <img src="<?php /*echo ROOT_URL; */?>upload/images/33507534599741773508.png" />
                        </div>
                        <div class="slider-right">
                            <div class="campaign">
                                <h1>AXE ANARCHY<br/> LIMITED EDITION<br/> COUPLE SET</h1>
                                <p class="campaign-description">Become a Buzzer and get invited to join a Campaign. You will receive FREE product to try</p>
                                <p class="campaign-view"><a href="<?php /*echo ROOT_URL; */?>campaign">VIEW BUZZ ABOUT THIS CAMPAIGN</a></p>
                                <p class="campaign-become"><a href="<?php /*echo ROOT_URL; */?>register">BECOME A BUZZER NOW</a></p>
                            </div>
                        </div>
                    </li>

                    <li>
                        <div class="slider-left">
                            <img src="<?php /*echo ROOT_URL; */?>upload/images/33507534599741773508.png" />
                        </div>
                        <div class="slider-right">

                        </div>
                    </li>
                    <li>
                        <div class="slider-left">
                            <img src="<?php /*echo ROOT_URL; */?>upload/images/33507534599741773508.png" />
                        </div>
                        <div class="slider-right">

                        </div>
                    </li>-->
                </ul>
            </div>

            <div class="homepage-buzzer">
                <div class="homepage-buzzer-wrapper">
                    <div class="homepage-work">
                        <span class="homepage-work-icon"></span>
                        <label class="homepage-buzzer-text"><a href="<?php echo ROOT_URL; ?>activities">How It Works?</a></label>
                        <div class="homepage-work-items">
                            <div class="homepage-work-items-img buzzer1"></div>
                            <div class="homepage-work-items-content">
                                Become a Buzzer and get invited to join a Campaign. You will receive FREE product to try
                            </div>
                        </div>
                        <div class="homepage-work-items">
                            <div class="homepage-work-items-img buzzer2"></div>
                            <div class="homepage-work-items-content">
                                Write a review or comment about the product on your social network
                            </div>
                        </div>
                        <div class="homepage-work-items">
                            <div class="homepage-work-items-img buzzer3"></div>
                            <div class="homepage-work-items-content">
                                Then receive even more Invitations to try more exciting products
                            </div>
                        </div>
                    </div>
                    <div class="homepage-buzzy">
                        <div class="homepage-divider"></div>
                        <span class="homepage-buzzy-icon"></span>
                        <label class="homepage-buzzer-text"><a href="<?php echo ROOT_URL; ?>buzzie">Why Join Buzzy?</a></label>
                        <div class="homepage-buzzy-items">
                            <div class="homepage-buzzy-items-img"></div>
                            <div class="homepage-buzzy-items-content">
                                <p class="buzzy-content1"><span>1</span>Try new cool product</p>
                                <p class="buzzy-content2"><span>2</span>Share it with your friends</p>
                                <p class="buzzy-content3"><span>3</span>Influence big brands</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="homepage-footer">
                <div class="footer-tree"></div>
                <div class="footer-bird"></div>
                <div class="footer-notice">
                    If you are an Advertiser please click here to go to <a href="">ADVERTISER PAGE</a>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
